<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/oksub.css}">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/layui_ext/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/layui_ext/dtree/font/dtreefont.css}">
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
</head>
<body class="ok-body-scroll">
<div class="ok-body">

    <div class="layui-row">
        <div class="layui-col-md3">

                <form class="layui-form layui-col-md12 ok-search">
                    <button class="layui-btn" lay-submit="" lay-filter="search">
                        <i class="layui-icon">&#xe61f;</i>
                    </button>
                </form>



            <!-- 树形图  -->
            <div id="permissionTree" class="demo-tree-more"></div>
        </div>

        <div class="layui-col-md9">
            <table class="layui-hide" id="permissionTable" lay-filter="permissionTable"></table>
        </div>
    </div>
</div>
<!--js逻辑-->
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:inline="none">
    layui.extend({
        dtree: '{/}/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(["element", "table", "laydate", "okUtils", "okMock", 'dtree', "okLayer", "okUtils"], function () {
        var table = layui.table;
        var laydate = layui.laydate;
        var okUtils = layui.okUtils;
        var dtree = layui.dtree;
        var $ = layui.jquery;
        var okMock = layui.okMock;
        okLayer = layui.okLayer;
        okUtils = layui.okUtils;
        okLoading.close();
        laydate.render({elem: '#startTime', type: "datetime"});
        laydate.render({elem: '#endTime', type: "datetime"});

        // /permission/tree
        function initPermissionTree() {
            // ajax请求数据
            // 初始化树
            dtree.render({
                elem: "#permissionTree",
                dataStyle: "layuiStyle",
                data: permissionTree.data, // 使用data加载
                url: "/api/network/treeList" // 使用url加载（可与data加载同时存在）
            });

            // 绑定节点点击
            dtree.on("node('permissionTree')", function (obj) {
                if (obj.param.level == 3) {
                    layer.msg("禁止为该网点添加子网点");

                } else {
                    // layer.msg(JSON.stringify(obj.param));
                    //console.info(obj.param.id);
                    add(obj.param);
                }
                //
            });

            //})

        }

        // 执行方法
        initPermissionTree();
        initPermissionTable();


        function initPermissionTable() {

            var Permissiontable = table.render({
                elem: '#permissionTable',
                /* url: okMock.api.permission.list, */
                url: "/api/network/tableList",
                limit: 20,
                page: true,
                size: "sm",
                cols: [[
                    {field: "networkId", title: "网点编号", width: 170, sort: true, fixed: "left"},
                    {field: "networkName", title: "网点名称", width: 100},
                    {
                        field: "parentNetworkName",
                        title: "所属网点",
                        width: 100
                    },
                    /* {field: "address_id", title: "地址编号", width: 150}, */
                    {field: "address", title: "详细地址", width: 200},
                    {
                        field: "area", title: "区县", width: 120
                    },
                    {
                        field: "city", title: "城市", width: 100
                    },
                    {
                        field: "province", title: "省份", width: 120
                    },
                    {field: "principalName", title: "负责员工姓名", width: 100},
                    {field: "phone", title: "手机", width: 150},
                    {field: "telphone", title: "座机电话", width: 150},
                    {field: "remark", title: "备注", width: 150},
                    {field: "type", title: "类型", width: 100},
                    {field: "createTime", title: "创建时间", width: 150},
                    {field: "updateTime", title: "更新时间", width: 150},
                    {title: "操作", width: 100, templet: "#operationTpl", align: "center", fixed: "right"}
                ]],
                done: function (res, curr, count) {
                    /* console.info(res, curr, count);   */
                }
            });
        }

        table.on("tool(permissionTable)", function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data.networkId);
                    break;
            }
        });

        function add(d) {
            okLayer.open("新增用户", "/page/network/add", "90%", "90%", function (
                layero) {
                var iframeWin = window[layero.find("iframe")[0]["name"]];
                iframeWin.initForm(d);

            }, function () {
                location.reload(true);
            })
        }

        function edit(data) {
            console.info(data);

            okLayer.open("更新用户", "/page/network/edit", "90%", "90%", function (
                layero) {
                var iframeWin = window[layero.find("iframe")[0]["name"]];
                iframeWin.initForm(data);

            }, function () {
                location.reload(true);
            })

        }

        function del(networkId) {
            okLayer.confirm("确定要删除吗？", function () {
                okUtils.ajax("/api/network/delete", "post", {
                    nid: networkId
                }, true).done(function (response) {
                    console.log(response);
                    okUtils.tableSuccessMsg(response.msg);
                    location.reload(true);
                }).fail(function (error) {
                    console.log(error)
                });
            })
        }


        form.on("submit(search)", function () {
            var index = layui.layer.open({
                title: "新增站点",
                type: 2,
                content: "/page/network/add",
                success: function (layero, index) {
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回角色列表',
                            '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                    }, 500)
                }
            })
            layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                layui.layer.full(index);
            })
        });

    });
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	
</script>
<!--行工具栏模板-->
<script type="text/html" id="operationTpl">
    <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>

</body>
</html>
